<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Globals</title>
    <!-- 引入框架css文件 -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
    <!-- 引入css重置文件 -->
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet" href="./assets/css/animate.min.css">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./assets/css/common.css">
    <link rel="stylesheet" href="./assets/css/calculator.css">
</head>
<!-- eee7d9 -->

<body>
       <!-- header头部 -->
       <nav class="navbar navbar-default nav2">
           <div class="container">

               <div class="navbar-header">
                   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                       data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                       <span class="sr-only">Toggle navigation</span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                   </button>
                   <a class="navbar-brand" href="#"><img src="./assets/images/logo.png" alt="" class="wow fadeInDown"
                           data-wow-delay="0ms"></a>
               </div>

               <div class="collapse navbar-collapse lis" id="bs-example-navbar-collapse-1">
                   <ul class="nav navbar-nav navbar-right">
                       <li><a href="./index.html" id="home" class="wow fadeInDown" data-wow-delay="100ms">Home</a></li>
                       <li><a href="./pages.html" class="wow fadeInDown" data-wow-delay="200ms">Pages</a></li>
                       <li><a href="./investment.html" class="wow fadeInDown" data-wow-delay="300ms">Investment</a></li>
                       <li><a href="./news.html" class="wow fadeInDown" data-wow-delay="400ms">News</a></li>
                       <li><a href="./calculator.html" class="wow fadeInDown" data-wow-delay="500ms">Calculator</a></li>
                       <li><a href="./contacts.html" class="wow fadeInDown" data-wow-delay="600ms">Contacts</a></li>
                   </ul>
               </div>
           </div>
       </nav>
    <!-- 小导航栏 -->
    <div class="all">

        <div class="container">
            <!-- 小导航 -->
            <!-- <ul class="list">
                <li><a href="#">Home</a></li>
                <li><i>/</i></li>
                <li><a href="#">Pages</a></li>
                <li><i>/</i></li>
                <li><a href="#">Calculator</a></li>
            </ul> -->
        </div>
    </div>

    <!-- <nav class="navbar navbar-default nav2">
        <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img src="./assets/images/logo.png" alt=""></a>
            </div>

            <div class="collapse navbar-collapse lis" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Pages</a></li>
                    <li><a href="#">Investment</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Calculator</a></li>
                    <li><a href="#">Contacts</a></li>
                </ul>
            </div>
        </div>
    </nav> -->

    <div class="ment">
        <div class="container">
            <!-- 标题 -->
            <div class="title">
                <div class="top wow fadeInDown" data-wow-delay="200ms">Investment Calculator</div>
                <div class="under wow fadeInDown" data-wow-delay="300ms">  
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                    laoreet dolore magna aliquam.
                </div>
            </div>

            <!-- 进度条 -->
            <div class="into wow fadeInDown" data-wow-delay="500ms">
                <!-- 左边 -->
                <div class="left">
                    <div class="want">
                        <div class="plan">
                            Select Investment Plan
                        </div>
                    </div>

                    <!-- i want to -->
                    <div class="wantto">
                        <div class="box">
                            <div class="your">I want to invest:</div>
                            <div class="father">
                                <div class="son"></div>
                            </div>
                        </div>
                        <div class="num">
                            $6.000
                        </div>
                    </div>

                    <div class="wantto">
                        <div class="box">
                            <div class="your">For a period of:</div>
                            <div class="father">
                                <div class="son2"></div>
                            </div>
                        </div>
                        <div class="num2">
                            3 Months
                        </div>
                    </div>

                    <div class="wantto">
                        <div class="box">
                            <div class="your"> Number of Extensions:</div>
                            <div class="father">
                                <div class="son3"></div>
                            </div>
                        </div>
                        <div class="num2">
                            Once
                        </div>
                    </div>

                    <div class="wantto">
                        <div class="inter">
                            <div class="title">Interest:</div>
                            <!-- 按钮 -->
                            <div class="and">

                                <div class="father">
                                    <input type="checkbox" name="names" id="ck" hidden>
                                    <label for="ck">
                                        <div class="son"></div>
                                    </label>
                                </div>
                                <div class="txt">Added to the amount of the deposit.</div>
                            </div>


                            <!-- 按钮 -->
                            <div class="and2">
                                <div class="father" id="father">
                                    <input type="checkbox" name="name" id="ck2" hidden>
                                    <label for="ck2">
                                        <div class="son"></div>
                                    </label>
                                </div>
                                <div class="txt2">Pay on the card</div>
                            </div>
                        </div>
                    </div>

                    <div class="btns">
                        <div class="button">
                            <button>Calculate Now</button>
                        </div>
                        <p>* Calculation of interest is for reference purposes</p>
                    </div>
                </div>

                <!-- 右边 -->
                <div class="right">
                    <div class="top">
                        <div class="left">
                            <div class="in">
                                <p>I Invested:</p>
                                <span> $6.000</span>
                            </div>
                            <div class="pic2">
                                <div class="bgc"></div>
                            </div>
                            <p>
                                The total amount
                                of interest paid:
                            </p>
                        </div>


                        <div class="left">
                            <div class="in">
                                <p>I will get:</p>
                                <span>$6.216</span>
                            </div>
                            <div class="pic">
                                <div class="span"></div>
                                <div class="get"></div>
                            </div>
                            <p class="money">
                                $216
                            </p>
                        </div>
                    </div>
                    <div class="under">
                        <button>Checkout Request</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


<!-- 友情链接 -->
<div class="cap">
    <div class="container">
        <div class="bigbox">
            <!-- 第一个盒子 -->
            <div class="read wow fadeInDown" data-wow-delay="400ms">
                <div class="logo3"><img src="./assets/images/logo.png" alt=""></div>
                <!-- 文字 -->
                <div class="text">
                    Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est
                    notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas
                    humanitatis per seacula quarta decima et quinta decima. Read More...

                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                    tincidunt ut laoreet dolore magna aliquam erat volutpat.
                </div>
                <p class="social">Social Network</p>
                <div class="logo4">
                    <img src="./assets/images/icon-facebook.png" alt="">
                    <img src="./assets/images/icon2.png" alt="">
                    <img src="./assets/images/icon3.png" alt="">
                    <img src="./assets/images/icon4.png" alt="">
                    <img src="./assets/images/icon5.png" alt="">
                    <img src="./assets/images/icon6.png" alt="">
                    <img src="./assets/images/icon7.png" alt="">
                    <img src="./assets/images/icon8.png" alt="">

                </div>
            </div>

            <!-- 第二个盒子 -->
            <div class="recen wow fadeInDown" data-wow-delay="500ms">
                <div class="title">Recent News</div>
                <div class="may">
                    <div class="may07">07 May, 2015</div>
                    <div class="mirum">Mirum est notare quam littera gothica, quam nunc putamus parum, anteposuerit
                        litterarum.
                    </div>
                </div>
                <div class="apr">
                    <div class="aorit">23 April, 2015</div>
                    <div class="est">Claritas est etiam processus dynamicus.</div>
                </div>

                <div class="dece">
                    <div class="num">05 December, 2014</div>
                    <div class="times">Eodem modo typi, qui nunc nobis videntur clari, sollemnes in futurum.</div>
                </div>
            </div>

            <!-- 第三个盒子 -->
            <div class="email wow fadeInDown" data-wow-delay="600ms">
                <div class="title">Email Newsletters</div>
                <div class="sing">
                    <div class="mirum">Sign Up for Our Newsletter to get Latest Updates and Offers. Subscribe to
                        receive news in your inbox.
                    </div>
                </div>
                <div class="full">
                    <span>Full Name</span>
                    <input type="text" placeholder="Dmitry Tar">
                </div>

                <div class="full">
                    <span>Email Address</span>
                    <input type="password" placeholder="please">
                </div>
                <div class="btns">
                    <button type="">Subscribe Now</button>
                </div>

            </div>
        </div>
    </div>
</div>


<!-- footer部分 -->
<div class="footer wow fadeInDown" data-wow-delay="400ms">
    <div class="container">
        <div class="good">
            <div class="top"><img src="./assets/images/huo.png" alt=""></div>
            <div class="goods">
                © 2015 Good Investment <span> Globals</span> / Designed by <span>ThemeFire</span> / Only for Envato
                Market
            </div>
        </div>

    </div>

</div>
</body>

</html>
<!-- 框架依赖jq -->
<script src="./assets/js/jquare.js"></script>

<script src="./assets/js/bootstrap.min.js"></script>

<!-- less编译 -->
<script src="./assets/js/less.min.js"></script>

<script src="./assets/js/wow.min.js"></script>
<script>
    // wow.js 插件的初始化
    new WOW().init();
</script>

<!-- 重置 -->
<!-- <script src="./assets/js/reset.js"></script> -->